<template>
	<view class="container">
		<!-- 类目 -->
		<!-- <view class="category">
			<view :class="flag == 0 ? 'select' : ''" @tap="handleTypeChange(0)">雇主</view>
			<view :class="flag == 2 ? 'select' : ''" @tap="handleTypeChange(2)">零工</view>
		</view> -->
		<!-- 零工列表name -->
		<view class="list">
			<!-- 雇主列表 -->
			<view v-if="flag == 0" class="employer-info" v-for="item in collectList"
				@click="handleOpenPage(item.relationId, 0)">
				<view>
					<image :src="imgPath + item.user.avatar" mode="aspectFill"></image>
					<view>
						<view>
							<text>{{ item.user.userName }}</text>
							<!-- <image :src=" item.user.sex==1 ? '/static/icon1/21.png' : '/static/icon1/55.png'" mode="aspectFill"></image> -->
							<view v-if="item.user.sex==0" class="sex-nan">
								<image class="sex-image" src="@/static/icon3/nna1111.png" mode="aspectFill"></image>
								{{!item.age ? '未知' : item.age}}
							</view>
							<view v-if="item.user.sex==1" class="sex-nv">
								<image class="sex-image" src="@/static/icon3/nv111.png" mode="aspectFill"></image>
								{{!item.age ? '未知' : item.age}}
							</view>
						</view>
						<!-- <view>
							<text>诚信值</text>
							<text>{{ item.user.integrity/100 }}</text>
						</view> -->
						<view class="cxDiv">
							<view class="cx">
								<text>评分</text>
								<text>{{ item.user.integrity/100 }}</text>
							</view>
							<text class="fg">|</text>
							<view class="cx">
								<text>好评率</text>
								<text>{{ item.haopingRata*100 }}%</text>
							</view>
						</view>
					</view>
				</view>
				<view>
					<text>成交单数</text>
					<text>{{ item.user.issuanceNum }}</text>
				</view>
			</view>
			<!-- 零工列表 -->
			<!-- <view v-if="flag == 2" class="job-info" v-for="item in collectList" :key="item.relationId"
				@click="handleOpenPage(item.relationId, 2)">
				<view>
					<text>{{ item.task.name }}</text>
					<text>{{ item.task.applyNum }}/{{ item.task.number }}</text>
				</view>
				<view>
					<view>
						<image src="/static/icon1/14.png" mode="aspectFill"></image>
						<text>{{ item.task.address }}</text>
					</view>
					<view>
						<text>{{ item.user.userName }}</text>
						<image :src="imgPath + item.user.avatar" mode="aspectFill"></image>
					</view>
				</view>
				<view>
					<text>{{item.task.taskType == 0 ? '计时' :  item.task.taskType == 1 ? '计件' : '计天'}}</text>
					<view>
						<text>诚信值：</text>
						<text>{{ item.user.integrity/100 }}</text>
					</view>
				</view>
				<view>
					<text :style="{color: item.task.vipFlag ? '#4E9800': ''}">
						{{ item.task.taskType===0 ? (item.task.reward+item.task.subsidy) : item.task.reward}}{{ item.task.taskType==0 ? '元/小时' : item.task.taskType==1 ? '元/件' : item.task.taskType==2 ? '元/天' : ''}}
					</text>
					<text>{{ (Math.round(item.task.distance*100)/100).toFixed(2) }}km</text>
				</view> -->
			<!-- 补贴 -->
			<!-- 	<view class="subsidy" v-if="item.task.taskType && item.task.vipFlag && item.task.subsidy">补:
					{{item.task.subsidy}}元</view>
			</view> -->
		</view>
		<!-- 加载 -->
		<uni-load-more :status="hasFlag ? 'loading' : 'noMore'"></uni-load-more>
	</view>
</template>
<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	// import {
	// 	he_evaluate_lv
	// } from '@/libs/unit.js'
	export default {
		components: {
			uniLoadMore,
		},
		data() {
			return {
				isDelete: false, //是否删除页面
				street: {}, //街道
				hasFlag: true, // 是否还有更多数据要加载
				imgPath: '', //图片路径
				addressList: [], //区域选择范围
				addressKeys: [], //区域选key
				flag: 0, //当前类目0是雇主，2是工作
				collectList: [{
					task: {
						name: ''
					},
					user: {},
				}, ], //我收藏的列表
				requestObj: { //
					pageNum: 0,
					pageSize: 20,
					type: 0, //0是雇主，1是雇员，2是工作
					lat: '',
					lng: '',
				},
			}
		},
		methods: {
			// 更改类目
			handleTypeChange(flag) {
				if (this.requestObj.type == flag) return
				this.flag = flag
				console.log('flag', flag)
				this.refresh()
			},
			//打开雇主或零工详情页
			handleOpenPage(id, flag) {
				if (flag == 0) {
					uni.navigateTo({
						url: '/pages/employer-detail/employer-detail?bossId=' + id
					})
				} else {
					uni.navigateTo({
						url: '/pages/job-detail/job-detail?taskId=' + id
					})
				}
			},
			// 获取收藏列表
			async get_collect_list() {
				// console.log('获取收藏列表', this.hasFlag,uni.getStorageSync('token'))
				if (!this.hasFlag) return // 说明已经没有更多啦
					++this.requestObj.pageNum
				this.requestObj.type = this.flag
				this.requestObj.lat = uni.getStorageSync('location')[0]
				this.requestObj.lng = uni.getStorageSync('location')[1]
				// console.log('获取收藏列表this.requestObj', this.requestObj)
				let res = await this.$fetch(this.$api.get_collect_list, this.requestObj, 'POST')
				console.log('获取收藏列表res', res)
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				let haoping = uni.getStorageSync('heEvaluateLv') ? uni.getStorageSync('heEvaluateLv') : []
				// 整理数据,res.rows.   user为null，则改为""
				res.rows.forEach(item => {
					/*Object.getOwnPropertyNames(item.user).forEach(function(key) {
						item.user[key] = item.user[key] == null ? '' : item.user[key]
						if (haoping.indexOf(item.user.userId) != -1) {
							item.haoping = haoping[haoping.indexOf(item.user.userId) + 1]
						} else {
							he_evaluate_lv(item.user.userId).then((v) => {
								this.$set(item, 'haoping', v)
							})
						}
					})*/
					if (this.flag == 2) {
						item.task.reward = item.task.reward.divide(100)
						item.task.subsidy = item.task.subsidy.divide(100)
					}
					// console.log('item~~~~~~~~~~~~~', item)
				})
				// 拼接
				this.collectList = [...this.collectList, ...res.rows]
				this.hasFlag = this.collectList.length < res.total
			},
			// 刷新
			refresh() {
				this.collectList = []
				this.hasFlag = true
				this.requestObj.pageNum = 0
				this.requestObj.pageSize = 20
				this.get_collect_list()
			},
		},
		onLoad() {},
		onShow() {
			this.street = uni.getStorageSync('street')
			this.imgPath = uni.getStorageSync('imgPath')
			this.addressKeys = Object.keys(this.street)
			this.addressList = ['不限'].concat(Object.values(this.street))
			this.refresh()
		},
		onReachBottom() {
			this.get_collect_list()
		}
	}
</script>
<style lang="less">
	.container {
		&>.category {
			position: fixed;
			top: 0;
			/* #ifdef H5 */
			top: 89rpx;
			/* #endif */
			z-index: 1;
			display: flex;
			justify-content: center;
			background-color: #FFFFFF;

			&>view {
				position: relative;
				width: 375rpx;
				height: 90rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: rgba(64, 33, 16, 0.50);

				// 选中样式
				&.select {
					color: #F39B19;
					;
					font-weight: bold;

					&::before {
						content: "";
						position: absolute;
						bottom: 0;
						left: 162.5rpx;
						width: 50rpx;
						height: 4rpx;
						background: #F39B19;
					}
				}
			}
		}

		&>.list {
			margin-top: 20rpx;
			background-color: #FFFFFF;

			&>.employer-info {
				padding: 30rpx;
				border-bottom: 1px solid #F2F2F2;
				display: flex;
				align-items: center;
				justify-content: space-between;

				&>view {
					display: flex;

					&>image {
						width: 108rpx;
						height: 108rpx;
						border-radius: 50%;
						margin-right: 30rpx;
					}

					&>view {
						display: flex;
						flex-direction: column;

						&>view:first-child {
							// border: 1px solid #000000;
							display: flex;
							align-items: center;
							margin-bottom: 20rpx;

							&>text {
								line-height: 48rpx;
								margin-right: 20rpx;
								height: 48rpx;
								font-size: 17px;
							}

							&>image {
								// align-self: flex-end;
								width: 26rpx;
								height: 26rpx;
							}
						}

						&>view:last-child {
							height: 40rpx;
							display: flex;
							align-items: center;

							text:first-child {
								// margin-right: 30rpx;
								color: rgba(64, 33, 16, 0.70);
							}

							text:last-child {
								font-weight: bold;
							}
						}
					}
				}

				&>view:last-child {
					flex-direction: column;
					text-align: right;

					&>text:first-child {
						margin-bottom: 2rpx;
						height: 34rpx;
						font-size: 12px;
						color: rgba(64, 33, 16, 0.70);
					}

					&>text:last-child {
						height: 60rpx;
						font-weight: bold;
						font-size: 22px;
						color: #F39B19;
					}
				}
			}

			&>.job-info {
				padding: 30rpx;
				position: relative;
				letter-spacing: 0;

				&>view:first-child {
					// border: 1px solid #007AFF;
					margin-bottom: 10rpx;
					height: 48rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					text:first-child {
						font-weight: bold;
						font-size: 17px;
					}
				}

				&>view:nth-child(2) {
					// border: 1px solid #007AFF;
					margin-bottom: 10rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					&>view:first-child {
						display: flex;
						align-items: center;

						&>image {
							width: 26rpx;
							height: 30rpx;
							margin-right: 10rpx;
						}

						&>text {
							width: 460rpx;
							font-size: 12px;
							color: rgba(64, 33, 16, 0.70);
						}
					}

					&>view:last-child {
						display: flex;
						align-items: center;

						&>image {
							width: 60rpx;
							height: 60rpx;
							border-radius: 50%;
						}

						&>text {
							margin-right: 10rpx;
							font-size: 12px;
							color: rgba(64, 33, 16, 0.70);
						}
					}
				}

				&>view:nth-child(3) {
					// border: 1px solid #007AFF;
					margin-bottom: 30rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					&>text {
						line-height: 34rpx;
						width: 80rpx;
						text-align: center;
						font-size: 12px;
						color: #F39B19;
						border: 1px solid #F39B19;
						border-radius: 2px;
					}

					&>view {
						&>text {
							font-size: 12px;
							color: rgba(64, 33, 16, 0.70);
						}
					}
				}

				&>view:nth-child(4) {
					// border: 1px solid #007AFF;
					display: flex;
					justify-content: space-between;

					&>text:first-child {
						font-size: 17px;
						font-weight: bold;
						color: #FF650C;
					}

					&>text:last-child {
						align-self: flex-end;
						font-size: 12px;
						color: rgba(64, 33, 16, 0.40);
					}
				}

				&>.subsidy {
					font-weight: bold;
					font-size: 17px;
					color: #4E9800;
				}

				&::before {
					content: "";
					position: absolute;
					top: 0;
					width: 720rpx;
					height: 2rpx;
					// border-radius: 1px;
					background: #F3F3F3;
				}
			}
		}
	}

	.fg {
		font-size: 24rpx;
		color: #7F7F7F;
		line-height: 49rpx;
		margin: 0 20rpx;
	}

	.cx {
		font-size: 24rpx;
		font-weight: 400;
		color: #7F7F7F;
		line-height: 49rpx;

		&>text:nth-last-child(1) {
			color: #FE4B28;
			margin-left: 8rpx;
		}
	}

	.cxDiv {
		display: flex;
		flex-direction: row;
	}

	.sex-nan {
		width: 73rpx;
		height: 32rpx;
		background: #1CAAEA;
		border-radius: 4rpx;
		margin-left: 8rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-size: 20rpx;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 20rpx;
	}

	.sex-nv {
		width: 73rpx;
		height: 32rpx;
		background: #F90865;
		border-radius: 4rpx;
		margin-left: 8rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-size: 20rpx;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 20rpx;
	}

	.sex-image {
		width: 17rpx;
		height: 17rpx;
		margin-right: 9rpx;
	}
</style>
